<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/commons::head(showCategory)}">
</head>
<style>
    .img {
        width: 90px;
        height: 90px;
        margin: -15px 0 10px 0;
        /*border: black 1px solid;*/
    }

    .img-object {
        object-fit: cover;
        object-position: 50% 20%;
    }
</style>
<body style="background-image: linear-gradient(500grad,#a8edea,#fed6e3)">
<div th:replace="~{commons/commons::body}">
</div>
<!--内容页-->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-panel">
            <div style="padding: 20px 30px;text-align: center;background-color: #a8e6e3">
                <img th:src="@{/category/tag/{aId}(aId=${ltag.id})}" class="img img-object">
                <div>[[${ltag.tagName}]]</div>
            </div>
        </div>
    </div>
</div>
<!--内容展示-->
<div class="layui-row layui-inline layui-col-md9" id="app" style="margin-top: 10px">
    <div class="layui-col-md-offset4" style="margin-bottom: 25px" v-for="(item,index) in items">
        <div class="layui-card " style="background-image: linear-gradient(100grad,#a8edea,#fed6e3)">
            <div class="layui-card-header layui-row">
                <span><a :id="item.id" :href="'/articles/showDetail/'+item.id">
                    {{item.title}}
                </a></span>
                <span class="layui-layout-right layui-inline" style="right: 20px">
                <img alt="查看数量" class="layui-nav-img"
                     src="/static/layui/font/eye.svg" style="width: 20px;height: 15px;margin-right: -4px">
                                    {{item.viewCounts}}
            </span>
            </div>
            <div class="layui-card-body layui-text">
                <blockquote class="layui-inline">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{item.summary.substring(0,400)}}
                </blockquote>
            </div>
            <div class="layui-card-body layui-table-fixed-l" style="padding: 16px 15px;">
                <img alt="作者" class="layui-nav-img" src="/static/img/author.svg"
                     style="width: 20px;height: 40px;margin-right:-2px">
                                {{item.author}}
                <div class="layui-col-xs-offset2 layui-card-body " style="width: 250px;margin:-40px 0 0 100px">
                    <span :id="tag.id" v-for="(tag,index1) in item.tags"
                          class="layui-border-green layui-btn-radius layui-inline layui-btn-xs">
                        {{tag.tagName}}
                    </span>
                </div>
                <span class="layui-layout-right layui-inline" style="right: 15px;margin-top: 25px">
                    <img alt="发布时间" class="layui-nav-img" style="width: 20px;height: 15px;margin-right:-2px"
                         src="/static/layui/font/clock.svg">
                                        {{item.createDate}}
                </span>
            </div>
        </div>
    </div>
    <!--分页-->
    <div class=" layui-col-md-offset4" style="margin-top: 18px" id="demo2-1"></div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            aId:'[[${ltag.id}]]',
            items: []
        }
    });
    layui.use(['element', 'laypage'], function () {
        let element = layui.element;
        let laypage = layui.laypage;
        let cnt = 0;

        $.ajax({
            type: 'post',
            url: '/tags/cnt',
            async: false,
            data: {
                tId:app.aId
            },
            success: function (e) {
                cnt = e.data;
                console.log("cnt="+cnt)
            }
        });
        laypage.render({
            elem: 'demo2-1'
            , count: cnt
            , theme: '#FF5722'
            , limit: 3
            , curr: location.hash.replace('#!fenye=', '') //获取起始页
            , hash: '/next/n' //自定义hash值
            , jump: function (obj, first) {
                $.post('/tags/showCategory'

                    , {tId:app.aId,page: obj.curr, pageSize: obj.limit}
                    , function (result) {
                        app.items = result.data;
                        console.log("冲刺！完成我的博客！");
                    });
            }
        });
    });
</script>
</html>